<template>
    <component :is="component" :src="src" @rendered="rendered" />
</template>

<script setup>
//引入相关样式
import '@vue-office/excel/lib/index.css'
import { ref, shallowRef, onMounted } from 'vue';

const src = ref('')
const options = {
    '/excel-preview': {
        loadComponent: () => import('@vue-office/excel'),
    },
    '/docx-preview': {
        loadComponent: () => import('@vue-office/docx'),
    },
    '/pdf-preview': {
        loadComponent: () => import('./pdf-preview.vue'),
    },
}
const component = shallowRef(null)

onMounted(() => {
    const { pathname, search } = location
    src.value = search.replace('?url=', '')
    // 加载组件
    options[pathname].loadComponent().then(module => {
        component.value = module.default
    })
})

const rendered = () => {
    console.log("渲染完成")
}
</script>